@import './mixin.styl'

$white = #fff
$black = #000
$active = #67c23a
$theme-classic-color = #58B7FF
$theme-classic-color-active = #0e94ff

.scene
  padding: 8px 0
  background: rgba($black, 0.2)
  text-align: center
  overflow: hidden

  .icon-info, .lock, .text, .img-box
    position: absolute

  .icon-info
    width: 36px
    right: -2px
    top: -2px
    font-size: 24px
    z-index: 3

  .lock
    full-cover()

  .text
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    padding: 2px 0
    color: $white
    height: 20px
    line-height: 20px
    z-index: 12

    & > p
      position: absolute
      min-width: 100%
      text-align: center

      &.move
        -webkit-animation: 2s move infinite linear

  .img-box, .img-box img
    width: 100%
    height: 100%
    transition: all 0.4s
    // z-index: -1

  .scene-list
    min-width: 100%

    .scene-list-item
      position: relative
      display: inline-block
      margin-left: 10px
      border-radius: 4px
      color: $white
      box-sizing: border-box
      cursor: pointer
      overflow: hidden

      &.active
        box-sizing: border-box
        border: 1px solid $theme-classic-color

        .text
          color: $theme-classic-color

      .lock
        background-color: rgba($black, 0.5)
        z-index: 10

        i
          font-size: 30px

      img
        width: 100%
        height: 100%
        border-radius: 4px

      &:hover
        img
          transform: scale(1.2)

      .text
        background-color: rgba($black, 0.5)
        z-index: 12
        color: $white

  .scene-group
    min-width: 100%
    margin-top: 10px
    padding-left: 10px

    .scene-group-item
      display: inline-block
      font-size: 14px
      margin-right: 10px
      bd-1px(transparent, 0)
      text-align: center
      cursor: pointer

      &.active
        border: 1px solid $theme-classic-color-active

      .label
        display: inline-block
        border-radius: 4px
        color: #fff
        background-color: rgba($black, 0.4)
        border: 1px solid transparent

        &.active
          color: $white
          background-color: rgba($theme-classic-color-active, 0.5)

@keyframes move
  0%
    left: 0

  100%
    left: -100%
